<template>
    <div class="menu-wrap">
        <router-link v-for="(item, i) in list" :key="i" :to="item.path" class="corner">{{ item.name }}</router-link>
    </div>
</template>

<script>
export default {
    name: 'menuList',
    props: ['list'],
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
.menu-wrap {
    a {
        min-width: 62px;
        display: inline-block;
        padding: 10px;
        margin: 10px;
        text-decoration: none;
        font-weight: bold;
        color: #29e2fc;
        text-align: center;
        font-size: 14px;

        &.router-link-exact-active {
            color: #33ff99;
        }
    }
}

.corner {
    --corner-color: #29e2fc;
    --corner-width: 0.12rem;
    --corner-size: 0.5rem;
    --corner-radius: 0;
    --corner-bg: rgba(255, 255, 255, 0.15);
    background: linear-gradient(to left, var(--corner-color), var(--corner-color)) left top no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left top no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right top no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) right top no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) left bottom no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left bottom no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat;
    background-size: var(--corner-width) var(--corner-size), var(--corner-size) var(--corner-width), var(--corner-width) var(--corner-size), var(--corner-size) var(--corner-width);
    background-color: var(--corner-bg);
    border-radius: var(--corner-radius);
}
</style>